<template>
  <div class="m-y-10 flex">
    <el-avatar :src="curUser.avatar" class="m-l-16 m-r-10 shrink-0" />
    <div class="flex-1">
      <div class="flex">
        <el-input
          ref="input"
          type="textarea"
          :rows="3.5"
          :placeholder="placeholder"
          v-model="input"
          class="no-resize m-r-10 bilibili"
          :disabled="loading"
          :id="id"
        />
        <el-button
          type="primary"
          class="line-height-normal"
          @click="sendReply"
          :loading="loading"
          style="min-width: 70px;"
        >
          <template v-if="!loading">发表<br />评论</template>
        </el-button>
      </div>
      <div class="m-t-10">
        <el-popover placement="bottom" width="400" trigger="click">
          <emoji @emoji="handleEmoji" />
          <el-button slot="reference" size="mini" round>
            <svg-icon icon-name="emoji"/>&nbsp;表情
          </el-button>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { formatComment } from '@/components/shared/comments/format';

export default {
  name: 'reply',
  props: {
    floorId: { // 这一楼的id
      type: Number,
    },
    receiveUserId: {
      type: Number,
    },
  },
  data() {
    return {
      input: '',
      loading: false,
      id: new Date().getTime(),
    };
  },
  computed: {
    ...mapState({ curUser: 'currentUser' }),
    ...mapState('comments', {
      curModule: 'currentModule',
      activeComment: 'activeComment',
    }),
    placeholder() {
      const receiver = this.activeComment.author;
      if (this.floorId && receiver && receiver.nickname) return `回复 ${receiver.nickname}：`;
      return '有什么想说的';
    },
  },
  methods: {
    // 发表评论
    sendReply() {
      const validInput = this.input.trim();
      if (!validInput) return;

      this.loading = true;
      this.$api.comments.create({
        placement: this.curModule.type,
        placementId: this.curModule.id,
        content: validInput,
        mainFloorId: this.floorId, // 主楼id
        receiveCommentId: this.activeComment.id, // 回复的是哪个评论
        replySubFloor: this.floorId ? this.floorId !== this.activeComment.id : undefined, // 是否回复主楼
        receiveUserId: this.receiveUserId || this.activeComment.author.id, // 被回复人id
      }).then((res) => {
        this.$message.success('评论成功');
        this.$emit('replied', formatComment(res.data));
        this.input = '';
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 聚焦
    onFocus() { this.$refs.input.focus(); },
    handleEmoji(item) {
      const inputArea = document.getElementById(this.id);
      function changeSelectedText(obj, str) {
        if (window.getSelection) {
          inputArea.setRangeText(str);
          inputArea.selectionStart += str.length;
          inputArea.focus();
        } else if (document.selection) {
          obj.focus();
          const sel = document.selection.createRange();
          sel.text = str;
        }
      }
      changeSelectedText(inputArea, item);
      this.content = inputArea.value;
    },
  },
};
</script>

<style></style>
